<template>
  <div class="goodsinfo-container">
    <!-- 小球 -->
    <transition
      @before-enter="beforeEnter"
      @enter="enter"
      @after-enter="afterEnter"
    >
      <div class="ball" v-show="flag"></div>
    </transition>

    <!-- 轮播图 -->
    <div class="mui-card">
      <div class="mui-card-content">
        <div class="mui-card-content-inner">
          <swiper :lunbotu="lunbotu" :imgname="'src'"></swiper>
        </div>
      </div>
    </div>

    <!-- 中间 -->
    <div class="mui-card">
      <div class="mui-card-header">{{ goodsinfo.title }}</div>
      <div class="mui-card-content">
        <div class="mui-card-content-inner">
          <p class="pri">
            市场价:
            <span
              ><del>￥{{ this.goodsinfo.market_price }} </del>
            </span>
            销售价:
            <span style="font-size:16px ;  color : red ; font-weight:bold; "
              >￥{{ this.goodsinfo.sell_price }}
            </span>
          </p>
          <p>
            购买数量：
          </p>
          <div class="mui-numbox" data-numbox-min="1" data-numbox-max="9">
            <button class="mui-btn mui-btn-numbox-minus" type="button">
              -
            </button>
            <input
              id="test"
              class="mui-input-numbox"
              type="number"
              value="1"
              @change="changetext"
            />
            <button class="mui-btn mui-btn-numbox-plus" type="button">+</button>
          </div>

          <mt-button type="primary" size="small">立即购买</mt-button>
          <mt-button type="danger" size="small" @click="addto"
            >加入购物车</mt-button
          >
        </div>
      </div>
    </div>

    <!-- 下面 -->
    <div class="mui-card">
      <div class="mui-card-header">页眉</div>
      <div class="mui-card-content">
        <div class="mui-card-content-inner">
          <p>商品货号：{{ goodsinfo.goods_no }}</p>
          <p>库存情况：{{ goodsinfo.stock_quantity }}</p>
          <p>上架时间：{{ goodsinfo.add_time | dateFormat("YYYY-DD-DD ") }}</p>
          <br />
          <div class="btnarea">
            <!-- 除了用router-link还可以用@click='fun' fun里面写js代码来进行跳转 -->
            <mt-button type="primary" size="large" plain @click="godesc"
              >图文介绍</mt-button
            >
            <mt-button type="danger" size="large" plain @click="gocomment"
              >商品评论</mt-button
            >
          </div>
        </div>
      </div>
      <div class="mui-card-footer">页脚</div>
    </div>
  </div>
</template>

<script>
import swiper from "../sub-components/Swiper.vue";
import mui from "../../../lib/mui/js/mui.js";
import { mapMutations } from "vuex";
export default {
  data() {
    return {
      lunbotu: [],
      goodsinfo: {},
      flag: false,
      number: 1,
    };
  },
  created() {
    this.getlunbotu();
    this.getgoodsinfobyid();
  },
  methods: {
    ...mapMutations(["addToCart"]),
    async getlunbotu() {
      const { data } = await this.$http.get("/api/getthumimages/" + this.id);
      this.lunbotu = data.message;
    },
    async getgoodsinfobyid() {
      const { data } = await this.$http.get("/api/goods/getinfo/" + this.id);
      this.goodsinfo = data.message[0];
    },
    godesc() {
      this.$router.push("/home/goodsdesc/" + this.goodsinfo.id);
      console.log(this);
    },
    gocomment() {
      this.$router.push("/home/goodscomment/" + this.goodsinfo.id);
    },
    addto() {
      //单击加入购物车
      this.flag = !this.flag;
      // this.$store.commit('addToCart',{id:this.id,count:this.number})
      this.addToCart({
        id: this.id,
        count: this.number,
        price: this.goodsinfo.sell_price,
      });
    },
    beforeEnter(el) {
      // 入场动画开始之前，设置小球的起始状态
      el.style.transform = "translate(0, 0)";
    },
    enter(el, done) {
      // 入场动画结束之后，小球的终止状态
      //    transform：变换
      //    translate： 位移
      //    transition： 过渡效果
      el.offsetWidth;
      // 设置小球的入场动画终止状态

      // 动态获取小球的横纵坐标
      const ballPos = el.getBoundingClientRect();
      // 动态获取徽标的横纵坐标【注意：这里获取徽标的位置，和双向数据绑定没有任何关系，所以，可以直接使用普通的DOM操作】
      // DOM操作的优势：不论要操作的元素属于哪个组件，只要这个元素属于document，那么就能够直接获取到
      const badgePos = document.getElementById("badge").getBoundingClientRect();
      const left = badgePos.left - ballPos.left;
      const top = badgePos.top - ballPos.top;

      // 动态设置 top 和 left 值
      el.style.transform = "translate(" + left + "px, " + top + "px)";
      // 设置小球的过渡效果
      // 贝塞尔曲线在线生成器： http://cubic-bezier.com/#.46,-0.4,1,.49
      el.style.transition = "all .5s ease";
      // 当入场动画完成之后，需要手动调用一下 done 回调函数，直接跳过小球的出场动画
      done();
    },
    afterEnter(el) {
      // 入场动画完成之后的回调函数
      this.flag = !this.flag;
    },
    changetext() {
      // this.number =  document.getElementById('test').value
      this.number = parseInt(document.getElementById("test").value);
    },
  },
  props: ["id"],
  components: {
    swiper,
  },
  mounted() {
    mui(".mui-numbox").numbox();
  },
};
</script>

<style lang="scss" scoped>
.goodsinfo-container {
  background-color: #eee;
  overflow: hidden;
}

.btnarea {
  flex-direction: column;
  button + button {
    margin-top: 15px;
  }
}

.ball {
  width: 15px;
  height: 15px;
  background-color: red;
  border-radius: 50%;
  // 让小球脱离标准流
  position: absolute;
  z-index: 999;
  left: 80px;
  top: 430px;
  // 将来小球要通过动画位移到的位置
  // transform: translate(87px, 250px);
}
</style>
